<template>
  <el-table
    v-loading="loading"
    v-el-table-infinite-scroll="load"
    :data="tableData"
    :infinite-scroll-disabled="disabled"
    height="200px"
  >
    <el-table-column prop="id" label="序 ID" width="180" />
    <el-table-column prop="name" label="名字" width="180" />
    <el-table-column prop="value" label="对应值" />
  </el-table>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
import axios from "axios";

const listData = ref([]);
const loading = ref(false);
const tableData = ref([]);
const disabled = ref(false);
const page = ref(0);
const total = ref();

onMounted(() => {
  init();
});
const init = async () => {
  loading.value = true;
  const { data } = await axios.get("/api/getList");
  loading.value = false;
  listData.value = stackFn(data.data);
  total.value = listData.value.length;
  load();
};

// 分堆
const stackFn = (data) => {
  let i = 0,
    result = [];
  while (i < data.length) {
    result.push(data.slice(i, i + 10));
    i = i + 10;
  }
  return result;
};

const load = () => {
  if (disabled.value) return;
  page.value++;
  if (page.value <= total.value) {
    tableData.value = tableData.value.concat(listData.value[0]);
  }
  listData.value.shift();
  if (page.value === total.value) {
    disabled.value = true;
  }
};
</script>
